<template>
  <el-menu default-active="2" class="el-menu-vertical-demo" :router="true" :collapse="isCollapse"
    background-color="gray" text-color="#fff">
    <el-menu-item index="/home">
      <el-icon>
        <icon-menu />
      </el-icon>
      <template #title>首页</template>
    </el-menu-item>
    <el-sub-menu :index="`/home/${item.path}`" v-for="(item, index) in checkedkeys" :key="index">
      <template #title>
        <el-icon>
          <location />
        </el-icon>
        <span>{{ item.label }}</span>
      </template>
      <el-menu-item :index="`/home/${item.path}/${child.path}`" v-for="(child, index) in item.children">{{ child.label
      }}
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
  <!-- </div> -->
</template>

<script>
import { mapState } from "vuex";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
export default {
  name: "",
  data() {
    return {
      // isCollapse: false,
    };
  },
  props: ["isCollapse"],
  computed: {
    //将vuex中的数据映射到当前组件实例上
    ...mapState(["checkedkeys"]),
  },
  mounted() {
    console.log("aside", this);
  },
  components: {
    Document,
    IconMenu,
    Location,
    Setting,
  },
  // props: {
  //   isCollapse: {
  //     // 接收父传子属性  是否折叠左侧菜单栏
  //     type: Boolean,
  //     required: true,
  //   },
  // },
};
</script>
<style lang="scss" scoped>
.el-menu {
  border: none;
}
</style>